<template>
  <div class="card-out-container">
    <a-form
      layout="inline"
      v-if="showMore"
      class="multi-line-search-form"
      id="makeSearchBoxId"
    >
      <template v-for="(item, index) in hangerDetailSParams" :key="index">
        <a-form-item :label="item.title" v-if="item.show">
          <a-input v-if="item.type == 'input'" :maxLength="item.maxLength || 29" v-model:value.trim="queryParam[item.key]" :placeholder="`${$t('common.pleaseInput')} ${item.title}`" @keyup.enter="loadData" allowClear />
          <a-cascader  v-if="item.type == 'cascader'" v-model:value="stationNo" :show-search="{ filter }" :fieldNames="fieldNames" :options="selectArray" :placeholder="$t('other.pleaseSelectStation')" style="min-width: 200px" />
          <a-range-picker v-if="item.type == 'time'" v-model:value="queryParam[item.key]" :placeholder="[$t('common.startDate'), $t('common.endDate')]" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" show-time/>
        </a-form-item>
      </template>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
          <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
          <a-button type="link" @click="filterSearch">{{$t('common.filterConfig')}}</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="search-more-box">
      <div :class="['list-operate3', 'mt-0', {'show-more': showMore}]">
        <div class="operate-left"></div>
        <div class="operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button :placeholder="$t('basicData.styleNo')" v-if="!showMore"  @search="loadData" />
          <a-button class="ml-10" @click="toggleMore" type="primary" ghost >{{$t('common.highFilter')}}</a-button>
        </div>
        
      </div>
    </div>
    <a-table :rowKey="(record) => record.id+Math.random()" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :pagination="ipagination" :scroll="{x: 1000, y: 'calc(100vh - 370px)'}" @change="handleTableChange"></a-table>
    
    <FilterParamsModal ref="filterParamsModalRef" @ok="onParamsConfigOK" />
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { listColumns, hangerDetailSParams } from './modules/hangDetailsConfig' 
import FilterParamsModal from "@/components/filterParamsModal/filterParamsModal.vue";
import axios from '@/utils/request'
import { startTimeValue, endTimeValue } from '@/utils'
export default {
  name: 'hangerDetail',
  mixins: [ListMixinPm],
  components:{FilterParamsModal},
  data () {
    return {
      url: {
        list: '/api/hanger/hanger/hanger-history',
        station: '/api/device/hanger-line-bridge/three-level-pull-down'
      },
      columns: listColumns,
      hangerDetailSParams,  
      fieldNames: {
        label: 'name',
        value: 'value',
        children: 'children'
      },
      selectArray: [],
      stationNo: [],
      fuzzySearchName: "styleNo",
      searchTimeAry: ["inTime", "leaveTime"],
    }
  },
  methods: {
    getQueryParams () {
      console.log(this.stationNo);
      let param = {
        lineNo: this.stationNo ? (this.stationNo[0] || null) : null,
        stationNo: this.stationNo ? (this.stationNo[2] || null) : null
      }
      this.searchTimeAry && this.searchTimeAry.forEach(i => {
        if (this.queryParam[i] && this.queryParam[i].length) {
          param[`${i}Start`] = startTimeValue(this.queryParam[i][0])
          param[`${i}End`] = endTimeValue(this.queryParam[i][1])
        }
      })
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return param || {}
    },
    searchReset () {
      this.stationNo = null
      this.loadData(1)
    }, 
    filterSearch() {
      this.$refs.filterParamsModalRef.open(this.hangerDetailSParams)
    }, 
    onParamsConfigOK(checkedAry) {
      this.hangerDetailSParams.forEach((i) => {
        i.show = checkedAry.includes(i.key)
      })
      localStorage.setItem( "hangerDetailSParams", JSON.stringify(this.hangerDetailSParams) )
      this.initTableHeight()
    }, 
    initTableHeight() {
      this.$nextTick(() => {
        if (this.showMore) {
          let formHeight = `${ document.getElementById("makeSearchBoxId").clientHeight + 340 }px`;
          this.tableHeight = `calc(100vh - ${formHeight})`
        } else {
          this.tableHeight = "calc(100vh - 320px)"
        }
      })
    },
    filter (inputValue, path) {
      return path.some(option => option && option.name.toString().indexOf(inputValue) > -1)
    },
    async getThreeList () {
      const res = await axios.postAction(this.url.station)
      if (res.success) {
        let data = res.data
        data.forEach(i => {
          i.value = i.lineNo
          i.children = i.masterTrackList
          i.children && i.children.forEach(el => {
            el.value = el.id
            el.children = el.stationList
            el.children && el.children.forEach(i => {
              i.name = i.stationNo
              i.value = i.stationNo
            })
          })
        })
        this.selectArray = data
      }
    },
  },
  created () {
    this.getThreeList()
  }
}
</script>